<template>
  <div class="scrolldiv" @scroll="scrolldown" ref="scrolldiv">
    <!-- 标题 -->
    <van-nav-bar class="head3" title="众说纷纭 百家美味" fixed />
    <!-- 头 -->
    <van-tabs
      class="vantabs"
      :sticky="stickyV"
      v-model="activeName"
      :swipeable="swipeableval"
      offset-top="46px"
    >
      <!-- 推荐 -->
      <van-tab title="推荐" name="a">
        <div class="example-3d">
          <swiper class="swiper" :options="swiperOption">
            <!-- 轮播图 -->
            <swiper-slide v-for="item in 10" :key="item">
              <!-- 卡片 -->
              <img src="/img/Shopkeeper2.jpg" alt="" />
              <div class="shopdet">
                <p>赵家园子佬火锅</p>
                <!-- v-model="value" -->
                <van-rate
                  :size="15"
                  color="#555"
                  void-icon="star"
                  void-color="#C0C0C0"
                />
                <h6 id="rj">￥60/人</h6>
                <van-row type="flex" justify="space-between">
                  <van-col span="12">
                    <h6>重庆火锅 加州花园</h6>
                  </van-col>
                  <van-col span="6">
                    <van-icon name="location-o" />
                    <span>200m</span>
                  </van-col>
                </van-row>
                <van-tag color="#DCDCDC" text-color="#696969">公益商家</van-tag>
                <van-tag
                  color="#DCDCDC"
                  text-color="#696969"
                  style="marginleft: 0.3125rem"
                  >锅底浓郁,牛油飘香</van-tag
                >
              </div>
            </swiper-slide>
          </swiper>
        </div>
        <div class="collect">
          <!-- 删除 -->
          <van-button round type="info"
            ><van-icon size="30px" name="cross"
          /></van-button>
          <!-- 收藏 -->
          <van-button round type="info"
            ><van-icon size="30px" name="like-o"
          /></van-button>
        </div>
      </van-tab>

      <!-- 店铺 -->
      <van-tab title="店铺" name="c">
        <!-- 推荐店铺 -->

        <div style="margin: 50px 0" v-for="(item, i) in shops" :key="i">
          <router-link :to="`/shop/${item.id}`">
            <div class="shop">
              <div class="shopImg">
                <img :src="item.img" alt="" />
                <span v-if="item.isLinked">连锁</span>
              </div>
              <div class="shopdet">
                <p>{{ item.shopName }}</p>
                <!-- 评价 -->
                <div @click.prevent="colorB(i)">
                  <van-rate
                    v-model="item.pingfen"
                    :size="15"
                    :color="item.curColor"
                    void-icon="star"
                    void-color="#eee"
                  />
                </div>

                <h6 id="rj">{{ item.price }}</h6>
                <van-row type="flex" justify="space-between">
                  <van-col span="12">
                    <h6>{{ item.catename }} {{ item.area }}</h6>
                  </van-col>
                  <van-col span="6">
                    <van-icon name="location-o" />
                    <span>{{ item.distance }}</span>
                  </van-col>
                </van-row>
                <van-tag color="#DCDCDC" text-color="#696969">{{
                  item.smart_tag
                }}</van-tag>

                <van-divider />
              </div>
            </div>
          </router-link>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  name: "ImagePreview",
  data() {
    return {
      url:'/shop/',
      swipeableval: true,
      // 评价颜色变化
      // 默认底部栏选项
      active: 2,
      // 默认头部选项
      value: 5,
      activeName: "c",
      // 预览图
      list: [],
      loading: true,
      finished: false,
      // 广场图片颜色轮换
      icon: {
        active: "../assets/img/广场点击(1).png",

        inaction: "../assets/img/广场点击.png",
      },
      // 轮播图设置
      swiperOption: {
        // 竖向
        direction: "vertical",
        // 轮播效果
        effect: "coverflow",
        grabCursor: true,
        // 循环
        loop: true,
        centeredSlides: true,
        slidesPerView: "auto",
        coverflowEffect: {
          // 角度
          rotate: 20,
          // 延伸
          stretch: 100,
          // 距离
          depth: 100,
          // 修饰
          modifier: -2,
          slideShadows: true,
        },
        pagination: {
          el: ".swiper-pagination",
        },
      },
      // 预览图

      //
      scrollV: null,
      stickyV: true,
      shops: [
        // {
        //   shopName: "素满香·素食自助餐厅（龙湖西苑店）",
        //   img: "/img/e2599f998637f5aef1a5707482ee516a230601.jpg@353w_353h_1e_1c",
        //   price: "￥22/人",
        //   area: "新牌坊",
        //   distance: "新牌坊<100m",
        //   catename: "综合自助",
        //   smart_tag: "渝北区自助餐好评榜第1名",
        //   isLinked: 1,
        //   pingfen: 5,
        //   curColor: "#ee0a24",
        // },
       
      ],
    };
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    // 评价颜色
    ratecolor(i) {
      // console.log(i);
      this.shops[i].pingfen == 5
        ? (this.shops[i].curColor = "#ee0a24")
        : (this.shops[i].curColor = "#ffd21e");
      // console.log(this.shops.pingfen);

      // console.log(red);
    },
    // 监听评价
    colorB(i) {
      console.log(this.shops[i].pingfen);
      this.ratecolor(i);
    },
    // 轮播图界面无法滑动
    // 预览图
    getImg(images, i, index) {
      console.log(i);
      //  console.log(this.content[index].imgs);
      ImagePreview({
        images: this.content[i].imgs,
        showIndex: true,
        loop: false,
        startPosition: index,
      });
    },
    // 获取滚动值
    scrolldown() {
      this.scrollV = this.$refs.scrolldiv.scrollTop;
    },
    // 判断是否显示
    scrollVul(newV, oldV) {
      // console.log(newV, oldV);
      this.stickyV = newV < oldV;
    },
    Axios() {
      let url = ('/cuisines/square');
      this.$axios.get(url).then((res) => {
        console.log(res);
        this.shops=res.data.data
        
      });
    },
  },

  mounted(){
    this.Axios()
  },
  watch: {
    // 监听头标签轮播
    activeName: {
      handler() {
        this.vswipeable();
      },
    },
    // 监听滚动值
    scrollV(newV, oldV) {
      this.scrollVul(newV, oldV);
    },
  },
  // 轮播图
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const onSwiper = (swiper) => {
      console.log(swiper);
    };
    const onSlideChange = () => {
      console.log("slide change");
    };
    return {
      onSwiper,
      onSlideChange,
    };
  },
};
</script>

<style>
.shopdet .van-col--6 {
  text-align: right;
}

</style>
<style lang="scss" scoped>

// 界面定高
.scrolldiv {
  height: 38.5625rem;
  overflow: scroll;
}
// 头标签
.vantabs {
  margin: 0 10px;
}
// 轮播图按钮
.collect {
  display: flex;
  width: 100%;
  height: 5.125rem;
  justify-content: space-between;
  align-items: center;
  // 按钮样式
  button {
    color: #000;
    background-color: white;
    width: 3.125rem;
    height: 3.125rem;
    // border-radius: 50%;
    border: none;
    box-shadow: 0 0 5px 5px rgb(204, 203, 201);
    position: relative;
    top: -5px;
    z-index: 10;
  }
  > button:first-child {
    margin-left: 3.125rem;
  }
  > button:last-child {
    margin-right: 3.125rem;
  }
}
// 标题栏
.head3 {
  width: 100%;
  // position: fixed;
  // background-color: rgb(247, 198, 67);
  z-index: 10;
}

.goods-card {
  margin: 0;
  background-color: white;
}
// 店铺页
.shop {
  margin: 0;
  padding: 0 5px;
  display: flex;

  .shopImg {
    position: relative;
    img {
      width: 80px;
      border-radius: 10%;
      margin-right: 0.625rem;
      // z-index: 1;
    }
    span {
      padding: 0.0625rem;
      width: 25px;
      background-color: rgb(247, 198, 67);
      border-radius: 10%;
      display: flex;
      font-size: 0.75rem;
      align-content: center;
      line-height: 16px;
      position: absolute;
      top: -0px;
      left: 3.4375rem;
      z-index: 2;
    }
  }
  .shopdet {
    p{
      color: rgb(0, 0, 0);
      font-size: 15px;
      font-weight:600 ;
    }
    #rj {
      margin: 0.2125rem;
      margin-left: 0.3125rem;
      display: inline-block;
      font-size: 12px;
    }
    width: 100%;
    h6 {
      color: #000;
      margin: 0.2125rem;
    }
  }
}
// 轮播
.example-3d {
  // background-image: url("");
  width: 100%;
  height: 435px;
  padding-top: 45px;
  // padding-bottom: 50px;
}

.swiper {
  height: 100%;
  width: 100%;
  position: relative;
  .swiper-slide {
    // display: none;
    // display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 400px;
    // text-align: center;
    font-weight: bold;
    background-color: rgb(255, 255, 255);
    background-position: center;
    background-size: cover;
    // border: 1px solid gainsboro;
    border-radius: 2%;
    box-shadow: 0 0 10px 2px gray;
    color: black;
    margin: 0 auto;
    img {
      display: block;
      width: 100%;
      border-radius: 2% 2% 0 0;
    }
    .shopdet {
      padding: 0.3125rem;
      rate van-rate {
        display: flex;
      }
    }
  }
  .swiper-pagination {
    .swiper-pagination-bullet.swiper-pagination-bullet-active {
      background-color: rgb(80, 57, 57);
    }
  }
}
</style>
